.order-detail {
	height: 100vh;
	background-color: $mall-bg-100;
	display: flex;
	flex-direction: column;
	
	.order-container {
		flex: 1;
		position: relative;
		height: calc(100vh - env(safe-area-inset-bottom));
	}
	
	.order-scroll {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
	}
	
	.status-section {
		background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
		padding: 40rpx 30rpx;
		
		.status-info {
			color: #fff;
			
			.status {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 12rpx;
				display: block;
			}
			
			.tip {
				font-size: 26rpx;
				opacity: 0.9;
			}
		}
	}
	
	.goods-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: $uni-border-radius-lg;
		padding: 30rpx;
		
		.goods-card {
			display: flex;
			
			.goods-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: $uni-border-radius-sm;
				background-color: $mall-bg-100;
				margin-right: 20rpx;
			}
			
			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.goods-name {
					font-size: 28rpx;
					color: $mall-text-100;
					line-height: 1.4;
					margin-bottom: 12rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				
				.price-info {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					
					.price {
						font-size: 32rpx;
						color: $mall-primary-100;
						font-weight: bold;
						
						&::before {
							content: '¥';
							font-size: 24rpx;
						}
					}
					
					.points {
						font-size: 32rpx;
						color: $mall-accent-100;
						font-weight: bold;
						
						.unit {
							font-size: 24rpx;
							margin-left: 4rpx;
						}
					}
					
					.mixed-price {
						display: flex;
						align-items: baseline;
						
						.points {
							font-size: 28rpx;
							color: $mall-accent-100;
							font-weight: bold;
						}
						
						.unit {
							font-size: 24rpx;
							color: $mall-accent-100;
						}
						
						.plus {
							margin: 0 8rpx;
							color: $mall-text-200;
							font-size: 24rpx;
						}
						
						.cash {
							font-size: 28rpx;
							color: $mall-primary-100;
							font-weight: bold;
							
							&::before {
								content: '¥';
								font-size: 24rpx;
							}
						}
					}
					
					.gift-card,
					.gift-voucher {
						font-size: 28rpx;
						color: $mall-accent-100;
						font-weight: bold;
					}
					
					.count {
						font-size: 26rpx;
						color: $mall-text-200;
					}
				}
			}
		}
	}
	
	.order-info, .payment-info {
		margin: 20rpx;
		background-color: #fff;
		border-radius: $uni-border-radius-lg;
		padding: 30rpx;
		
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: $mall-text-200;
			}
			
			.value {
				font-size: 28rpx;
				color: $mall-text-100;
				
				&.gift-card,
				&.gift-voucher {
					color: $mall-accent-100;
					font-weight: bold;
				}
			}
			
			&.total {
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid $mall-bg-200;
				
				.value {
					color: $mall-primary-100;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}
	}
	
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
		padding: 12rpx 20rpx;
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
		
		button {
			min-width: 180rpx;
			height: 80rpx;
			border-radius: $uni-border-radius-base;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			
			&.cancel-btn {
				background-color: #fff;
				color: $mall-text-200;
				border: 2rpx solid $mall-bg-200;
			}
			
			&.pay-btn {
				background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
				color: #fff;
				font-weight: bold;
			}
			
			&.delete-btn {
				background-color: #fff;
				color: $mall-text-200;
				border: 2rpx solid $mall-bg-200;
			}
			
			&.logistics-btn {
				background-color: #fff;
				color: $mall-primary-100;
				border: 2rpx solid $mall-primary-100;
				min-width: 180rpx;
			}
			
			&.confirm-btn {
				background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
				color: #fff;
				font-weight: bold;
				min-width: 180rpx;
			}
			
			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}
		}
	}
	
	.logistics-info {
		// ... existing code ...
	}
}

.address-section {
	margin: 20rpx;
	background-color: #fff;
	border-radius: $uni-border-radius-lg;
	padding: 30rpx;
	
	.address-content {
		.label {
			font-size: 28rpx;
			color: $mall-text-200;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.address-info {
			.user-info {
				margin-bottom: 12rpx;
				
				.name {
					font-size: 28rpx;
					color: $mall-text-100;
					font-weight: bold;
					margin-right: 20rpx;
				}
				
				.phone {
					font-size: 28rpx;
					color: $mall-text-200;
				}
			}
			
			.detail {
				font-size: 28rpx;
				color: $mall-text-100;
				line-height: 1.4;
			}
		}
	}
}
